import React from 'react'
import cartDomCss from './index.module.scss'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'

class cartDom extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            thisCartList: this.props.cartList
        }
    }
    render() {
        return (
            <div className={cartDomCss.main}>
                {
                    this.props.cartList.length > 0 ?
                        <ul className={cartDomCss.goodsList}>
                            {
                                this.props.cartList &&
                                this.props.cartList.map((item) => {
                                    return (
                                        <li key={item.cartId}>
                                            <img onClick={this.myClick.bind(this, { par: "CHANGE", id: item.cartId })} className={cartDomCss.select} src={item.isSelect ? "https://cart.m.vsigo.cn/static/images/icon_xz@2x.png" : "https://cart.m.vsigo.cn/static/images/icon_wxz@2x.png"} alt="" />
                                            <Link to={'/deatil/' + item.id}>
                                                <img className={cartDomCss.goodsImg} src={item.img} alt="" />
                                            </Link>
                                            <div className={cartDomCss.goodsInfo}>
                                                <p className={cartDomCss.goodsName}>{item.name}</p>
                                                <p className={cartDomCss.type}>{item.color}/{item.degree}</p>
                                                <div className={cartDomCss.numBox}>
                                                    <p className={cartDomCss.price}>￥{item.price}</p>
                                                    <div className={cartDomCss.num}>
                                                        <p onClick={this.myClick.bind(this, { par: "RED_NUM", id: item.cartId })}>-</p>
                                                        <p>{item.num}</p>
                                                        <p onClick={this.myClick.bind(this, { par: "ADD_NUM", goods: item })}>+</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    )
                                })
                            }
                            <div className={cartDomCss.totalBox}>
                                <div className={cartDomCss.selectAll}>
                                    <img onClick={this.myClick.bind(this, {
                                        par: "CHANGE_ALL", id: this.props.cartList.every((item) => {
                                            return item.isSelect
                                        })
                                    })} src={
                                        this.props.cartList.every((item) => {
                                            return item.isSelect
                                        }) ? "https://cart.m.vsigo.cn/static/images/icon_xz@2x.png" : "https://cart.m.vsigo.cn/static/images/icon_wxz@2x.png"
                                    } alt="" />
                                    <p onClick={this.myClick.bind(this, {
                                        par: "CHANGE_ALL", id: this.props.cartList.every((item) => {
                                            return item.isSelect
                                        })
                                    })}>全选</p>
                                </div>
                                <div className={cartDomCss.total}>
                                    <p>合计：<span>￥{
                                        this.props.cartList.reduce((temp, item) => {
                                            return item.isSelect ? temp + item.num * item.price : temp
                                        }, 0)}</span></p>
                                    <p onClick={this.myClick.bind(this, { par: "TOTAL"})}>结算（{
                                        this.props.cartList.reduce((temp, item) => {
                                            return item.isSelect ? temp + 1 : temp
                                        }, 0)
                                    }）</p>
                                </div>
                            </div>
                        </ul>
                        :
                        <div className={cartDomCss.cartNull}>
                            <img src="https://cart.m.vsigo.cn/static/images/icon_kgwc@2x.png" alt="" />
                            <p>购物车还是空的</p>
                            <p>去挑些中意的商品吧，亲</p>
                            <div className={cartDomCss.bottomBtn}>
                                <Link to="/">前往首页</Link>
                                <Link to="/category">去搜索</Link>
                            </div>
                        </div>
                }


            </div>
        )
    }
    myClick = (e) => {
        let action = {
            type: "",
            data: { cartId: e.id }
        }
        switch (e.par) {
            case "CHANGE":
                // console.log(222)
                action.type = "DOM_IS_SELECT"
                break;
            case "ADD_NUM":
                // let thisGoods= e.goods
                action = {
                    type: "DOM_ADD_CART",
                    data: { ...e.goods, num: 1 }
                }
                break;
            case "RED_NUM":

                action.type = "DOM_MODIFY_NUM"
                break;
            case "CHANGE_ALL":
                action.type = "DOM_ALL_SELECT"
                break;
            case "TOTAL":
                localStorage.setItem("pathName",this.props.location.pathname)
                this.props.history.push('/palSuccess')
                break;
            default:
                break;
        }
        this.props.dispatch(action)
    }
}

export default connect(state => {
    return { cartList: state.domesticCartList }
})(cartDom);